<template>
	<view class="locationStyle">
		<!-- <title :center="true" title="影院地址" iconSize="38" bgcolor="linear-gradient(45deg, #f43f3b, #ec008c)" color="#FFF"
		 @to-click="toBack(1)" icon="/static/img/other/to-back.png"></title> -->
		 <!-- 影院地址信息 start -->
	<!-- 	<div class="cinema-info-box" :style="{'padding-top': height * 1.5 + 100 + 'rpx'}">
			<view class="cinema-loc-title">{{cinemaLoc.nm || ''}}</view>
			<view class="cinema-loc-info" @click="phoneCall(cinemaLoc.tel)">
				<text class="iconfont icon-dianhua"></text>
				{{cinemaLoc.tel || ''}}
			</view>
			<view class="cinema-loc-info">
				<text class="iconfont icon-dingweiweizhi"></text>
				{{cinemaLoc.addr || ''}}
			</view>
		</div> -->
		<!-- 影院地址信息 end -->
		
		<view class="cinema-info-box" v-if="cinemaLoc">
			<image class="ima" src="../static/bgY.png" mode=""></image>
			<view class="con" :style="{'padding-top': height * 1  + 'px'}">
				<view class="di_top">
					<image class="icon" src="/static/img/other/to-back.png" mode="" @click="toBack"></image>
					<text>影院地址</text>
				</view>
				<view class="info">
					<view class="loc-title">{{cinemaLoc.nm || ''}}</view>
					<view class="loc-info" @click="phoneCall(cinemaLoc.tel)">
						<text class="iconfont icondianhua1 tel"></text>
						{{cinemaLoc.tel || ''}}
					</view>
					<view class="loc-info">
						<text class="iconfont iconw_dizhi-  loc"></text>
						{{cinemaLoc.addr || ''}}
					</view>
				</view>
			</view>
		</view>
		
		<!-- 影院地图盒子 start -->
		<view class="cinema-map-box" :style="{height: boxHeight + 'px'}">
			<map :style="{width: '100%', height: boxHeight + 'px'}" 
			:latitude="cinemaLoc.lat" :longitude="cinemaLoc.lng" :markers="covers"></map>
		</view>
		<!-- 影院地图盒子 end -->
	</view>
</template>

<script>
	import title from '@/pages/components/title.vue'
	export default {
		data() {
			return {
				height: 0,
				boxHeight: 0,
				options: {},
				cinemaLoc: {
					// addr: "通州区定海园二里新城商厦四层4004",
					// lat: 39.799059,
					// lng: 116.565725,
					// nm: "华夏天合影城",
					// tel: "010-68868858"
				},
				covers: []
			}
		},
		components: {
			title
		},
		onLoad(options) {
			this.options = options
		},
		onShow() {
			this.$nextTick(() => {
				this.height = this.$common.setWidthHeight(() => {
					this.getDom()
				})
				let menu = uni.getMenuButtonBoundingClientRect()
				this.height = menu.top
			})
			uni.showLoading({
				title: '加载中'
			})
			this.getCinemaDetail()
		},
		methods: {
			// 返回
			toBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 设置盒子高度
			getDom() {
				let query = uni.createSelectorQuery().in(this)
				query.selectAll('.cinema-info-box').boundingClientRect(res => {
					let height = res[0] ? res[0].height : 0
					this.boxHeight = (this.$store.state.windowHeight - height)
				}).exec()
			},
			// 打电话
			phoneCall(mobile) {
				this.$common.makePhoneCall(mobile)
			},
			// 获取电影院信息详情
			getCinemaDetail() {
				this.$api.getCinemaDetail(this.options).then(res => {
					this.cinemaLoc = res.data.data
					this.covers = [{
						latitude: this.cinemaLoc.lat,
						longitude: this.cinemaLoc.lng,
						title: this.cinemaLoc.addr
					}]
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.locationStyle {
		height: 100vh;
		overflow: hidden;
		.cinema-info-box {
			position: relative;
			width: 100vw;
			height: 350rpx;
			padding: 0 24rpx;
			// new
			.con{
				position: relative;
				z-index: 30;
				.di_top{
					color: white;
					text-align: center;
					font-size: 34rpx;
					.icon{
						width: 28rpx;
						height: 30rpx;
						float: left;
					}
				}
				.info{
					margin-top: 45rpx;
					color: white;
					.iconfont {
						margin-right: 10rpx;
					}
					.tel {
						color: #0081ff;
					}
					.loc {
						color: #f1255d;
					}
					.loc-info{
						margin: 24rpx;
						margin-left:0;
						margin-right:0;
						font-size: 28rpx;
						color: #F1F1F1;
					}
				}
			}
			.ima{
				width: 100%;
				height: 110%;
				position: absolute;
				z-index: 1;
				bottom: 0;
				left: 0;
			}
			
			// old
			.cinema-loc-title {
				font-size: 36rpx;
				color: #333;
				font-weight: 700;
				padding: 30rpx;
				height: 110rpx;
			}
			.cinema-loc-info {
				padding: 30rpx;
				font-size: 28rpx;
				color: #666;
				height: 100rpx;
			
			}
		}
	
		.cinema-map-box {
			
		}
	}
</style>
